<template>
  <Modal
    v-model="visible"
    :title="formDynamic.company"
    :width="900"
    @on-ok="handleOk"
    @on-cancel="handleCancel"
  >
    <div class="customer-info-modal">
      <!-- 顶部统计卡片区域 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="card-value">{{$t('page.customer.amount_spent')}}</div>
          <div class="card-label">{{formDynamic.amount_spent}}</div>
        </div>
		<div class="stat-card">
		  <div class="card-value">{{$t('page.customer.orders')}}</div>
		  <div class="card-label">{{formDynamic.order_count}}</div>
		</div>
		<!-- <div class="stat-card">
		  <div class="card-value" @click="navigateToCardPage('orders')">Order History</div>
		</div>
		<div class="stat-card">
		  <div class="card-value" @click="navigateToCardPage('sku')">SKU History</div>
		</div> -->
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧订单历史 -->
        <!-- <div class="order-history">
          <div class="section-header">
            <h3 class="section-title">Last Order Placed</h3>
            <div class="section-actions">
              <Button type="primary" size="small" @click="viewAllOrders">View All Orders</Button>
              <Button type="ghost" size="small" @click="createOrder" style="margin-left: 8px;">Create Order</Button>
            </div>
          </div>
          
          <div class="order-card" v-for="(order, index) in lastOrders" :key="index">
            <div class="order-header">
              <div class="order-meta">
                <span class="order-number">#{{ order.number }}</span>
                <span class="order-date">{{ order.date }}</span>
              </div>
              <div class="order-status" :class="order.statusClass">{{ order.status }}</div>
            </div>
            
            <div class="order-details">
              <p class="order-customer">{{ order.customer }}</p>
              <div class="order-items">
                <div class="order-item" v-for="(product, pIndex) in order.products" :key="pIndex">
                  <div class="product-info">
                    <span class="product-quantity">{{ product.quantity }}x</span>
                    <span class="product-name">{{ product.name }}</span>
                  </div>
                  <span class="product-price">${{ product.price }}</span>
                </div>
              </div>
              <div class="order-total">
                <span>总计:</span>
                <span class="total-amount">${{ order.amount }}</span>
              </div>
            </div>
          </div>
        </div> -->

        <!-- 右侧客户信息 -->
        <div class="customer-profile">
          <div class="profile-card">
            <div class="card-header">
              <h4 class="card-title" style="display: inline-block;">{{$t('page.customer.customer')}}</h4>
			  <p style="float: right;" class="view-all-link" @click="navigateToCardPage('orders')">{{$t('page.customer.view_all_orders')}}</p>
            </div>
            <div class="card-body">
              <div class="profile-info">
				  <div class="info-row">
				    <span class="info-label">{{$t('page.customer.customer_name')}}:</span>
				    <span class="info-value">{{ formDynamic.company }}</span>
				  </div>
				  <div class="info-row">
				    <span class="info-label">{{$t('page.customer.contact_person')}}:</span>
				    <span class="info-value">{{ formDynamic.first_name }}&nbsp&nbsp{{formDynamic.last_name}}</span>
				  </div>
                <div class="info-row">
                  <span class="info-label">{{$t('page.customer.email')}}:</span>
                  <span class="info-value">{{ formDynamic.email }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">{{$t('page.customer.phone')}}:</span>
                  <span class="info-value">{{ formDynamic.phone }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">{{$t('page.customer.address')}}:</span>
                  <span class="info-value">{{ formDynamic.address_info }}</span>
                </div>
				<!-- <div class="info-row">
					<el-image
					      v-for="(url, index) in images"
					      :key="index"
					      style="width: 50px; height: 50px; margin-right: 5px"
					      :src="url"
					      :preview-src-list="urlList"
					      :z-index="1"
					    ></el-image>
						<div v-for="(file, index) in others" :key="index" class="file-item">
						  📄 {{ getFileName(file) }}
						</div>
				</div> -->
              </div>
              <!-- <Button type="text" size="small" @click="showMoreCustomerInfo">
                <Icon type="ios-arrow-down" /> Show More
              </Button> -->
            </div>
          </div>

          <!-- <div class="profile-card">
            <div class="card-header">
              <h4 class="card-title">公司信息</h4>
            </div>
            <div class="card-body">
              <p class="company-name">{{ companyName }}</p>
              <div class="info-row">
                <span class="info-label">权限:</span>
                <span class="info-value">{{ permissions }}</span>
              </div>
              <Button type="text" size="small" @click="manageCompany">
                <Icon type="ios-settings" /> 管理
              </Button>
            </div>
          </div> -->

         <!-- <div class="profile-card">
            <div class="card-header">
              <h4 class="card-title">店铺信用</h4>
            </div>
            <div class="card-body">
              <p class="credit-value">{{ storeCredit }}</p>
            </div>
          </div> -->

          <div class="profile-card">
            <div class="card-header">
              <h4 class="card-title">{{$t('page.customer.tag')}}</h4>
            </div>
            <div class="card-body">
              <div class="tag-list">
                <span class="tag" v-for="(tag, tIndex) in formDynamic.selectedTags" :key="tIndex">{{ tag.label }}</span>
              </div>
            </div>
          </div>
		  
		  <div class="profile-card">
		    <div class="card-header">
		      <h4 class="card-title">{{$t('page.customer.customer_voucher')}}</h4>
		    </div>
		    <div class="card-body">
		      <div class="info-row">
		      	<el-image
		      	      v-for="(url, index) in images"
		      	      :key="index"
		      	      style="width: 50px; height: 50px; margin-right: 5px"
		      	      :src="url"
		      	      :preview-src-list="urlList"
		      	      :z-index="1"
		      	    ></el-image>
		      		<div v-for="(file, index) in others" :key="index" class="file-item">
		      		  📄 {{ getFileName(file) }}
		      		</div>
		      </div>
		    </div>
		  </div>
		  
        </div>
      </div>
    </div>
	<!-- 自定义底部按钮 -->
	    <template #footer>
	      <div class="custom-modal-footer">
	        <Button 
	          type="ghost" 
	          size="large" 
	          @click="handleCancel"
			  icon="md-close"
	          style="background: #fff; border-color: #d9d9d9; height: 40px; border-radius: 4px;"
	        >
	          
	        </Button>
	      </div>
	    </template>
  </Modal>
</template>

<script>
import { storeCustomerDetailApi } from "@/api/storeCustomer";
export default {
  name: 'customerInfo',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    customerData: {
      type: Object,
      default: () => ({
        amountSpent: '$10,289.28',
        orders: 12,
        customerSince: '8个月',
        rfmGroup: '高价值客户',
        customerEmail: 'mike@newfurnitureoutlet.com',
        customerPhone: '+1 773-807-1313',
        customerLang: '英语',
        companyName: 'New Furniture Outlet',
        permissions: 'US-VANITII-CA (仅订购)',
        storeCredit: '无店铺信用',
        tags: ['VIP客户', '高消费', '新客户']
      })
    },
    lastOrders: {
      type: Array,
      default: () => [
        {
          number: '6667',
          status: '待付款',
          statusClass: 'status-pending',
          amount: '3,674.92',
          date: '2025年7月2日 16:47',
          customer: 'New Furniture Outlet, US-VANITII-CA',
          products: [
            {
              quantity: 5,
              name: 'VANITII Cindy VANITY SET (白色)',
              price: '2,049.95'
            },
            {
              quantity: 2,
              name: 'VANITII Cindy VANITY SET (粉色)',
              price: '819.98'
            },
            {
              quantity: 1,
              name: 'VANITII Cindy VANITY SET (黑色)',
              price: '409.99'
            }
          ]
        }
      ]
    }
  },
  data() {
      return {
          modal: false,
		  ids:0,
		  images:[],
		  urlList: [],
		  others:[],
		  formDynamic: {
		    first_name: "",
		  	last_name: "",
		    phone: "",
		  	email:"",
		  	address:"",
		  	language:"1",
		  	state:"1",
		  	country:"20",
		  	company:"",
		  	apartment:"",
		  	city:"",
		  	zip_code:"",
		  	selectedTags: [],
			amount_spent:0,
			order_count:0,
			address_info:"",
			
		  },
      };
  },
  computed: {
    // 计算属性：将统计数据格式化为卡片数组
    statCards() {
      return [
        { label: '消费总额', value: this.customerData.amountSpent },
        { label: '订单数量', value: this.customerData.orders },
        { label: '客户关系', value: this.customerData.customerSince },
        { label: 'RFM分组', value: this.customerData.rfmGroup }
      ];
    },
    // 计算属性：格式化标签数据
    customerTags() {
      return this.customerData.tags || [];
    }
  },
  methods: {
	  navigateToCardPage(cardType) {
	        // 构建查询参数
	        const queryParams = {
	          customerId: this.ids,
	        };

	        // 根据卡片类型确定目标路径
	        let targetPath = '';
	        switch(cardType) {
	          case 'spending':
	            targetPath = '/customer/spending';
	            break;
	          case 'orders':
	            targetPath = '/supplier/order/list';
	            break;
	          case 'relationship':
	            targetPath = '/customer/relationship';
	            break;
	          case 'sku':
	            targetPath = '/supplier/order/list';
	            break;
	          default:
	            targetPath = '/customer/details';
	        }
	        
	        // 使用window.open打开新窗口
	        const queryString = new URLSearchParams(queryParams).toString();
	        window.open(`${targetPath}?${queryString}`, '_blank');
	      },
    handleOk() {
      this.$emit('update:modalVisible', false);
      // 处理确认逻辑
    },
	getFileName(url) {
	      try {
	        return url.split('/').pop();
	      } catch (e) {
	        return url;
	      }
	},
	getIofo(row) {
		console.log(row.id)
	    this.spinShow = true;
	    this.ids = row.id;
	    this.title = "客户详情";
	    storeCustomerDetailApi(row.id)
	        .then((res) => {
				this.images = [];
				this.others = [];
	            this.formDynamic = res.data.info;
				this.splitFilesByType(res.data.info.file_url)
	        })
	        .catch((res) => {
	            this.$Message.error(res.msg);
	        });
	},
	isImageFile(url) {
		const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
		const ext = url.split('.').pop().toLowerCase();
		return imageTypes.includes(ext);
	},
	
	splitFilesByType(fileArray) {
		if (!Array.isArray(this.formDynamic.images)) {
			this.images = [];
		}
		console.log('filearr',fileArray)
	  fileArray.forEach(url => {
	
	    if (this.isImageFile(url)) {
	      this.images.push(url);
		console.log('this.images',this.images);
	    } else {
	      this.others.push(url);
		  console.log('this.others',this.others);
	    }
	  });
	console.log('images', this.images)
	  // return { images, others };
	},
    handleCancel() {
		this.$emit('update:visible', false); // 统一使用visible
      // this.$emit('update:modalVisible', false);
    },
    viewAllOrders() {
      this.$Message.info('查看所有订单');
      // 实现查看所有订单的逻辑
    },
    createOrder() {
      this.$Message.info('创建新订单');
      // 实现创建订单的逻辑
    },
    showMoreCustomerInfo() {
      this.$Message.info('显示更多客户信息');
      // 实现显示更多客户信息的逻辑
    },
    manageCompany() {
      this.$Message.info('管理公司信息');
      // 实现管理公司信息的逻辑
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.customer-info-modal {
  padding: 24px;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #ebedf0;
}

.stat-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-value {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 4px;
}

.card-label {
  font-size: 14px;
  color: #86909c;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 24px;
}

/* 订单历史区域 */
.order-history {
  flex: 2;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #1d2129;
}

.order-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ebedf0;
  transition: all 0.3s ease;
}

.order-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.order-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-number {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
}

.order-date {
  font-size: 14px;
  color: #86909c;
}

.order-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.status-pending {
  background: #fff7e6;
  color: #fa8c16;
}

.order-customer {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 12px;
}

.order-items {
  margin-bottom: 12px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f2f3f5;
}

.order-item:last-child {
  border-bottom: none;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-quantity {
  color: #86909c;
}

.product-name {
  color: #1d2129;
}

.product-price {
  font-weight: 500;
  color: #1d2129;
}

.order-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
}

/* 客户信息区域 */
.customer-profile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ebedf0;
  transition: all 0.3s ease;
}

.profile-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #f2f3f5;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
}

.card-body {
  padding: 16px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-label {
  width: 140px;
  color: #86909c;
}

.info-value {
  color: #1d2129;
}

.company-name {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 8px;
}

.credit-value {
  font-size: 16px;
  color: #1d2129;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ivu-btn-ghost {
    color: #fff;
    background: #7C189F !important;
}
.tag {
  padding: 4px 8px;
  background: #f2f3f5;
  border-radius: 4px;
  font-size: 14px;
  color: #4e5969;
}
.view-all-link {
  float: right;
  color: #4c4e51; /* 正常状态颜色 */
  cursor: pointer; /* 鼠标变成手型 */
  transition: color 0.2s; /* 添加颜色过渡效果 */
}

.view-all-link:hover {
  color: #000000; /* 悬停状态颜色 */
  text-decoration: underline; /* 可选：添加下划线增强交互感 */
}
</style>